<template>
  <div v-show="showT" id="print-iframe">
    <div style="display: flex; padding: 10px">
      <div style="width: 30%" />
      <div
        style="
          flex: 1;
          text-align: center;
          font-weight: bold;
          font-size: 24px !important;
        "
      >
        <div>申楷桢(苏州) 防伪科技&nbsp;</div>
        生产通知单
      </div>
      <div style="width: 30%; text-align: right;position: relative;">
        <!-- <img id="barcode" style="width: 100%; text-align: right"> -->
        <div ref="code" style="width:80px;position: absolute;right:0;top:0"></div>
        <!-- <img style="padding-top: 5px; height: 90%;" :src="message.img" alt> -->
      </div>
    </div>
    <div style="display: flex; padding: 10px; justify-content: space-between">
      <div style="">订单单号: {{ productFrom.baseData.xieYiShuHao }}</div>
      <span style="">客户单号: {{ productFrom.baseData.customerBillNo }}</span>
      <span
        style=""
      >送货时间:{{ productFrom.baseData.expectedDeliveryTime }}</span>

    </div>
    <div
      style="
        border: 1px solid #000;
        font-size: 12px !important;
        overflow: hidden;
        box-sizing: border-box;
      "
    >
      <div
        style="
          width: 100%;
          float: left;
          box-sizing: border-box;
          display: flex;
          flex-wrap: wrap;
          padding: 5px;
        "
      >
        <div style="font-size: 15px; margin-top: 1px; width: 33%">
          产品名称: {{ productFrom.baseData.orderProductName }}
        </div>
        <div style="font-size: 15px; margin-top: px; width: 33%">
          版面: {{ productFrom.baseData.printingSurface }}
        </div>
        <div style="font-size: 15px; margin-top: 1px; width: 33%">
          版本: {{ productFrom.baseData.productVersions }}
        </div>
        <div style="font-size: 15px; margin-top: 1px; width: 33%">
          订货单位:{{ productFrom.baseData.customerName }}
        </div>
        <div style="font-size: 15px; margin-top: 1px; width: 33%">
          订单数量:{{ productFrom.baseData.tagSumQuantity }}
        </div>
        <div style="font-size: 15px; margin-top: 1px; width: 33%">
          成品库存: {{ productStockQuantity }}
        </div>
        <div style="font-size: 15px; margin-top: px; width: 33%">
          数据来源: {{ productFrom.baseData.dataComeFromName }}
        </div>
        <div style="font-size: 15px; margin-top: px; width: 33%">
          申放数量: {{ productFrom.baseData.tagDataQuantity }}
        </div>
      </div>
      <!-- <div style="float: left;width: 55%;height: 100%;text-align: center;">
        <img style="padding-top: 5px; height: 90%;" :src="message.img" alt>
      </div> -->
    </div>

    <div
      style="
        width: 100%;
        float: left;
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        font-size: 12px;
        box-sizing: border-box;
      "
    >
      <div
        v-for="item in productFrom.productData.tagDataList"
        :key="item.tagClientCode"
        style="border-bottom: 1px solid #000"
      >
        <div
          style="
            display: flex;
            padding: 2px;
            flex: 1;
            flex-wrap: wrap;
            padding: 5px;
            line-height: 1.5em;
          "
        >
          <div style="display: flex; width: 100%; flex-wrap: wrap">
            <div style="width: 25%">标签形状:{{ item.tagShapeName }}</div>
            <div style="width: 25%">
              尺寸:
              <span
                v-if="item.tagWidth && item.tagHeight"
              >{{ item.tagWidth + "*" + item.tagHeight }}mm</span>
            </div>
            <div style="width: 25%">
              R角:
              <span v-if="item.tagBorderRadius">{{
                item.tagBorderRadius + "mm"
              }}</span>
            </div>
            <div style="width: 25%">
              边空:
              <span v-if="item.tagBorder">{{ item.tagBorder + "mm" }}</span>
            </div>
            <div style="width: 25%">
              标签类型: <span>{{ item.tagTypeName }}</span>
            </div>
            <div style="width: 25%">
              被贴物:<span>{{ item.postedContent }}</span>
            </div>
          </div>
          <div
            v-for="item2 in item.layerDataList"
            :key="item2.layerClientCode"
            style="
              display: flex;
              flex-wrap: wrap;
              line-height: 1.5em;
              width: 100%;
            "
          >
            <div style="width: 100%; font-weight: bold; font-size: 14px">
              {{ item2.printingLayerName }}
            </div>
            <div style="width: 25%">材料: {{ item2.printingMaterialName }}</div>
            <div style="width: 25%">
              表面要求: {{ item2.surfaceRequireNameList.join() }}
            </div>
            <div style="width: 25%">
              刮开涂层颜色: {{ item2.scrapingCoatingColorName }}
            </div>
            <div style="width: 25%">
              刮开文字颜色: {{ item2.scrapingWordColorName }}
            </div>
            <div style="width: 25%">数码位数: {{ item2.technoPlaces }}</div>
            <div style="width: 25%">条码位数: {{ item2.barCodePlaces }}</div>
            <div style="width: 25%">
              留胶材质: {{ item2.liuJiaoTextureName }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div
      style="
        border: 1px solid #000;
        font-size: 12px !important;
        overflow: hidden;
        border-top: none;
        box-sizing: border-box;
      "
    >
      <div
        style="
          width: 60%;
          float: left;
          border-right: 1px solid #000;
          box-sizing: border-box;
        "
      >
        <div style="border-bottom: 1px solid #000; display: flex">
          <div
            style="
              box-sizing: border-box;
              border-right: 1px solid #000;
              padding: 2px;
              width: 10%;
              text-align: center;
            "
          >
            序号
          </div>
          <div style="display: flex; padding: 2px; flex: 1">
            <div style="width: 33%">印刷颜色</div>
            <div style="width: 33%">参考</div>
            <div style="width: 33%">备注</div>
          </div>
        </div>

        <div
          v-for="(cItem,index) in colorList"
          :key="index"
          style="display: flex"
          :style="{ borderBottom: index+1 <colorList.length ? '1px solid': '' }"
        >
          <div
            style="
              box-sizing: border-box;
              border-right: 1px solid #000;
              padding: 2px;
              width: 10%;
              text-align: center;
            "
          >
            {{ index }}
          </div>
          <div style="display: flex; padding: 2px; flex: 1">
            <div style="width: 33%">{{ cItem.colorName }}</div>
            <div style="width: 33%">{{ cItem.colorReferenceName }}</div>
            <div style="width: 33%">{{ cItem.colorRemark }}</div>
          </div>
        </div>
      </div>
      <div
        style="
          width: 40%;
          float: left;
          border-left: 1px solid #000;
          margin-left: -1px;
          box-sizing: border-box;
        "
      >
        <div style="">
          <div
            style="
              display: flex;
              padding: 2px;
              flex: 1;
              flex-wrap: wrap;
              padding: 5px;
            "
          >
            <div style="width: 50%">
              版辊尺寸: {{ productdd.makeup_RollSize + "mm" }}
            </div>
            <div style="width: 50%">
              拼版: {{ productdd.makeup_Combine || "--" }}
            </div>
            <div style="width: 50%">
              色数: {{ productdd.makeup_Colors || "--" }}
            </div>
            <div style="width: 50%">
              数码板面: {{ productdd.makeup_DigitalEdition + "mm" }}
            </div>
            <div style="width: 50%">
              模数: {{ productdd.makeup_Modules || "--" }}
            </div>
            <div style="width: 50%">
              平张断张: {{ productdd.makeup_PzDz || "--" }}
            </div>
            <div style="width: 50%">
              跳距: {{ productdd.makeup_SkipDistance + "mm" }}
            </div>
            <div style="width: 50%">
              间距: {{ productdd.makeup_SpaceBetween + "mm" }}
            </div>
            <div style="width: 50%">
              计划成品米数: {{ productdd.planCpMeters + "米" }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div
      style="
        border: 1px solid #000;
        border-top: none;
        font-size: 12px !important;
        padding: 5px;
        margin-top: -1px;
        box-sizing: border-box;
      "
    >
      <div style="text-align: center">生产工艺/耗材</div>
    </div>

    <div
      style="
        border: 1px solid #000;
        border-top: none;
        font-size: 12px !important;
        overflow: hidden;
        box-sizing: border-box;
        display: flex;
      "
    >
      <div
        style="
          width: 100%;
          height: 100%;
          padding-right: 0;s
          margin-left: -2px;
          box-sizing: border-box;
        "
      >
        <div
          style="
            border-bottom: 1px solid #000;
            display: flex;
            text-align: center;
          "
        >
          <div style="display: flex; flex: 1">
            <div style="width: 5%; border-right: 1px solid #000; padding: 2px">
              序号
            </div>
            <div style="width: 15%; padding: 2px">工艺名称</div>
            <div style="width: 15%; padding: 2px">生产设备</div>
            <div style="width: 10%; padding: 2px;border-right: 1px solid #000;">计划工时(分)</div>
            <div style="width: 15%; padding: 2px">物料类型</div>
            <div style="width: 15%; padding: 2px">物料名称</div>
            <div style="width: 20%; padding: 2px">规格型号</div>
            <div style="width: 10%; padding: 2px">计划用料</div>
            <div style="width: 10%; padding: 2px">打印用料</div>
            <div style="width: 15%; padding: 2px">备注</div>
          </div>
        </div>
        <div style="text-align: center">
          <div
            v-for="(Citem, index) in eqList"
            :key="Citem.stockGoodsCode"
            style="display: flex; flex: 1;"
            class="tt"
            :style="{ borderBottom: index+1 <eqList.length ? '1px solid': '' }"
          >
            <div style="width: 5%; border-right: 1px solid #000; padding: 2px">
              {{ index + 1 }}
            </div>
            <div style="width: 15%; padding: 2px">
              {{ Citem.produceCraftName }}
            </div>
            <div style="width: 15%; padding: 2px">
              {{ Citem.produceEquipmentName }}
            </div>
            <div style="width: 10%; padding: 2px;border-right: 1px solid #000;">
              {{ Citem.produceCraftPlanUseTime }}
            </div>
            <div style="width: 15%;padding: 2px">{{ Citem.categoryName }}</div>
            <div style="width: 15%;padding: 2px">{{ Citem.goodsName }}</div>
            <div style="width: 17%;padding: 2px">{{ Citem.stockGoodsName }}</div>
            <div style="width: 13%;padding: 2px">{{ Citem.planMaterialQuantity ? Citem.planMaterialQuantity + Citem.goodsUnitName : '' }}</div>
            <div style="width: 10%;padding: 2px">{{ Citem.printMaterialQuantity ? Citem.printMaterialQuantity + '米' : '' }}</div>
            <div style="width: 15%;padding: 2px">{{ Citem.produceMaterialRemark }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 工艺名称 -->

    <div
      style="
        border: 1px solid #000;
        border-top: none;
        font-size: 12px !important;
        padding: 5px;
        box-sizing: border-box;
      "
    >
      <div style="text-align: center">成品信息/备注</div>
    </div>
    <div
      style="
        padding-right: 0;
        border: 1px solid #000;
        border-top: none;
        font-size: 12px !important;
        overflow: hidden;
        box-sizing: border-box;
        display: flex;
      "
    >
      <div
        style="
          width: 20%;
          padding: 5px;
          height: 100%;
          border-right: 1px solid #000;
          line-height: 1.5em;
        "
      >
        <div style="font-weight: bold; font-size: 12px">包装方式</div>
        <div style="font-size: 12px">
          成品样式: {{ productFrom.productData.productStyleName }}
        </div>
        <div style="font-size: 12px">
          贴标样式: {{ productFrom.productData.tagAffixWayName }}
        </div>
        <div style="font-size: 12px">
          每张等于: {{ productFrom.productData.pageEqualTags }}{{ "套" }}
        </div>
        <div style="font-size: 12px">
          每包等于: {{ productFrom.productData.packageEqualPages }}{{ "张" }}
        </div>
        <div style="font-size: 12px">
          每箱等于: {{ productFrom.productData.boxEqualPackages
          }}{{ productFrom.productData.productStyle !== 2 ? "包" : "卷" }}
        </div>
        <div style="font-size: 12px">
          每箱共计: {{ productFrom.productData.boxEqualTags }}{{ "套" }}
        </div>
        <div style="font-weight: bold; font-size: 12px">装箱规格</div>
        <div style="font-size: 12px">纸箱规格:</div>
        <div style="font-size: 12px">纸箱种类:</div>
      </div>

      <div
        style="
          width: 80%;
          height: 100%;
          padding-right: 0;
          box-sizing: border-box;
             border-left: 1px solid #000;
             margin-left: -1px;
        "
      >
        <div style="min-height: 50px; padding: 5px;">
          <span style="font-weight: bold">业务要求</span>
          <div>
            {{ productFrom.baseData.orderRemark }}
          </div>
        </div>
        <div
          style="
            border-top: 1px solid #000;
            box-sizing: border-box;
            padding: 5px;
          "
        >
          <span style="font-weight: bold">生产要求</span>
          <div>
            {{ productdd.produceRemark }}
          </div>
        </div>
      </div>
    </div>
    <div style="display: flex; padding: 10px; justify-content: space-between">
      <div style="">开单人: {{ openProduceBillPersonName }}</div>
      <span style="">业务员: {{ productFrom.baseData.salesmanName }}</span>
      <span style="">开单时间: {{ productFrom.baseData.orderCreateTime }}</span>
    </div>
  </div>
</template>

<script>
import JsBarcode from 'jsbarcode'
import QRCode from "qrcodejs2";
export default {
  name: 'PrintOrder',
  props: {
    productFrom: {
      type: Object,
      default: () => ({})
    },
    productdd: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      showT: false,
      colorList: [],
      eqList: [],
      openProduceBillPersonName: '',
      productStockQuantity: 0
    }
  },
  watch: {
    productFrom: {
      deep: true,
      handler(val) {
      }
    },
    productdd: {
      deep: true,
      handler(val) {
        console.log(val)
        if (val.produceTaskBillNo) {
          this.$api.product
            .GetProduceWorkBillData({
              produceTaskBillNo: val.produceTaskBillNo
            })
            .then((res) => {
              this.colorList = res.printColorList
              this.openProduceBillPersonName = res.produceTaskData.openProduceBillPersonName
              this.productStockQuantity = res.orderData.productStockQuantity
              this.eqList = res.craftMaterialList
              // this.eqList = res.craftMaterialList.reverse()
            })
            .catch(() => {})
          console.log()
          this.$refs.code.innerHTML = ""
          var qrcode = new QRCode(this.$refs.code, {
                text: val.produceTaskBillNo, //二维码内容
                width: 80,
                height: 80,
                render: 'table',
                colorDark: "#333333", //二维码颜色
                colorLight: "#ffffff", //二维码背景色
                correctLevel : QRCode.CorrectLevel.H //容错率，L/M/H
              })
        }
      }
    }
  },
  created() {
    console.log(this.eqList)
  },
  methods: {
    GetProduceWorkBillData(code) {}
  }
}
</script>

<style>
.a{
  align-content: flex-end;
  position: absolute;
}
</style>
